<example name="Responsive grid">
  <file type="html">
    <div>
      <div id="grid"></div>
    </div>
  </file>

  <file type="css">
    :global(.cell) {
      background-color: silver;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid';

    class GridDemo extends React.Component {
      render() {
        return (
          <Grid>
            <Row start="xs">
              <Col xs={12} sm={4} md={6} lg={3}>
                <div className="cell">Cell 1</div>
              </Col>
              <Col xs={12} sm={8} md={6} lg={3}>
                <div className="cell">Cell 2</div>
              </Col>
              <Col xs={12} smOffset={4} sm={8} md={12} lg={6}>
                <div className="cell">Cell 3</div>
              </Col>
            </Row>
          </Grid>
        );
      }
    }

    render(<GridDemo />, document.getElementById('grid'));
  </file>
</example>

<example name="Grid offset">
  <file type="html">
    <div>
      <div id="grid"></div>
    </div>
  </file>

  <file type="css">
    :global(.cell) {
      background-color: silver;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid';

    class GridDemo extends React.Component {
      render() {
        return (
          <div>
            <h4>Offset a column.</h4>
            <Grid data-test="offset">
              <Row>
                <Col xsOffset={11} xs={1}>
                  <div className="cell">xsOffset={11} xs={1}</div>
                </Col>
                <Col xsOffset={10} xs={2}>
                  <div className="cell">xsOffset={10} xs={2}</div>
                </Col>
                <Col xsOffset={9} xs={3}>
                  <div className="cell">xsOffset={9} xs={3}</div>
                </Col>
                <Col xsOffset={8} xs={4}>
                  <div className="cell">xsOffset={8} xs={4}</div>
                </Col>
                <Col xsOffset={7} xs={5}>
                  <div className="cell">xsOffset={7} xs={5}</div>
                </Col>
                <Col xsOffset={6} xs={6}>
                  <div className="cell">xsOffset={6} xs={6}</div>
                </Col>
                <Col xsOffset={5} xs={7}>
                  <div className="cell">xsOffset={5} xs={7}</div>
                </Col>
                <Col xsOffset={4} xs={8}>
                  <div className="cell">xsOffset={4} xs={8}</div>
                </Col>
                <Col xsOffset={3} xs={9}>
                  <div className="cell">xsOffset={3} xs={9}</div>
                </Col>
                <Col xsOffset={2} xs={10}>
                  <div className="cell">xsOffset={2} xs={10}</div>
                </Col>
                <Col xsOffset={1} xs={11}>
                  <div className="cell">xsOffset={1} xs={11}</div>
                </Col>
              </Row>
            </Grid>
          </div>
        );
      }
    }

    render(<GridDemo />, document.getElementById('grid'));
  </file>
</example>

<example name="Grid auto size">
  <file type="html">
    <div>
      <div id="grid"></div>
    </div>
  </file>

  <file type="css">
    :global(.cell) {
      background-color: silver;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid';

    class GridDemo extends React.Component {
      render() {
        return (
          <div>
            <h4>Auto Width: add any number of auto sizing columns to a row. Let the grid figure it out.</h4>
            <Grid data-test="auto-size">
              <Row>
                <Col xs>
                <div className="cell">Autosize</div>
                </Col>
                <Col xs>
                <div className="cell">Autosize column with larger text</div>
                </Col>
              </Row>
              <Row>
                <Col xs>
                <div className="cell">Autosize</div>
                </Col>
                <Col xs>
                <div className="cell">Autosize column with much much much larger text</div>
                </Col>
                <Col xs>
                <div className="cell">Autosize</div>
                </Col>
              </Row>
            </Grid>
          </div>
        );
      }
    }

    render(<GridDemo />, document.getElementById('grid'));
  </file>
</example>

<example name="Grid alignment">
  <file type="html">
    <div>
      <div id="grid"></div>
    </div>
  </file>

  <file type="css">
    :global(.cell) {
      background-color: silver;
    }
    :global(.cell_tall) {
      height: 64px;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid';

    class GridDemo extends React.Component {
      render() {
        return (
          <div>
            <h4>
              Add classes to align elements to the start or end of row as well as the top, bottom, or center of a column
            </h4>
            <Grid data-test="alignment">
              <Row>
                <Col xs={12}>
                  <Row start="xs">
                    <Col xs={6} className="cell">start</Col>
                  </Row>
                </Col>
              </Row>
              <Row>
                <Col xs={12}>
                  <Row center="xs">
                    <Col xs={6} className="cell">center</Col>
                  </Row>
                </Col>
              </Row>
              <Row>
                <Col xs={12}>
                  <Row end="xs">
                    <Col xs={6} className="cell">end</Col>
                  </Row>
                </Col>
              </Row>
              <Row>
                  <Col xs={12}>
                    <Row top="xs">
                      <Col xs={6}><div className="cell">top</div></Col>
                      <Col xs={6}><div className="cell cell_tall"></div></Col>
                    </Row>
                  </Col>
                </Row>
                <Row>
                  <Col xs={12}>
                    <Row middle="xs">
                      <Col xs={6}><div className="cell">middle</div></Col>
                      <Col xs={6}><div className="cell cell_tall"></div></Col>
                    </Row>
                  </Col>
                </Row>
                <Row>
                  <Col xs={12}>
                    <Row bottom="xs">
                      <Col xs={6}><div className="cell">bottom</div></Col>
                      <Col xs={6}><div className="cell cell_tall"></div></Col>
                    </Row>
                  </Col>
                </Row>
            </Grid>
          </div>
        );
      }
    }

    render(<GridDemo />, document.getElementById('grid'));
  </file>
</example>

<example name="Grid columns distribution">
  <file type="html">
    <div>
      <div id="grid"></div>
    </div>
  </file>

  <file type="css">
    :global(.cell) {
      background-color: silver;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid';

    class GridDemo extends React.Component {
      render() {
        return (
          <div>
            <h4>Distribution: add classes to distribute the contents of a row or column.</h4>
            <Grid data-test="distribution">
              <Row around="xs">
                <Col xs={2}><div className="cell">around</div></Col>
                <Col xs={2}><div className="cell">around</div></Col>
                <Col xs={2}><div className="cell">around</div></Col>
              </Row>
              <Row between="xs">
                <Col xs={2}><div className="cell">between</div></Col>
                <Col xs={2}><div className="cell">between</div></Col>
                <Col xs={2}><div className="cell">between</div></Col>
              </Row>
            </Grid>
          </div>
        );
      }
    }

    render(<GridDemo />, document.getElementById('grid'));
  </file>
</example>
